<template>
  <view>
    <uv-navbar title="" placeholder bgColor="transparent" leftIcon="" :autoBack="true">
      <template #left>
        <view class="order_notice_status_icon">
          <image src="/static/images/detail_back_common.png" style="width: 22px;height: 9px;"></image>
        </view>
      </template>
      <template #center> 预约明细 </template>
    </uv-navbar>

    <view class="data_detail">
      <view class="data_detail_content">
        <view class="data_detail" v-for="item in record.items" :key="item.formKey">
          <view>{{ item.formName }}</view>
          <view>{{ item.formValue }}</view>
        </view>
      </view>
      <view class="" style="height: 100px;">

      </view>
    </view>

    <view class="bottom_btns">
      <view class="btns_content">
        <view class="btn btns_left" @click="goUnPassed()">
          审核未通过
        </view>
        <view class="btn btns_right" @click="goAudited()">
          审核通过
        </view>
      </view>
    </view>
    <!-- pop -->
    <uv-modal ref="modalIns" showCancelButton :asyncClose="true" title="请输入拒绝理由" @confirm="onConfirm">
      <uv-form :model="passForm" :rules="rules" ref="formIns" :style="{ width: '640rpx' }">
        <uv-form-item label="" prop="failReason">
          <uv-textarea v-model="passForm.failReason" placeholder="200字以内" :count="true" :maxlength="200">
          </uv-textarea>
        </uv-form-item>
      </uv-form>
    </uv-modal>
  </view>




</template>

<script lang="ts" setup>

import uvTextarea from '@climblee/uv-ui/components/uv-textarea/uv-textarea.vue'
import uvForm from '@climblee/uv-ui/components/uv-form/uv-form.vue'
import uvFormItem from '@climblee/uv-ui/components/uv-form-item/uv-form-item.vue'
import uvModal from '@climblee/uv-ui/components/uv-modal/uv-modal.vue'

import { ref, computed, reactive } from 'vue'
import { getRecords, onAppointformSubmit } from '@/services/appointform'
import { onReady, onLoad } from '@dcloudio/uni-app'


const record = ref({
  id: 0,
  items: []
})

const modalIns = ref()

const formIns = ref()

const rules = reactive({
  failReason: [{
    required: true,
    message: '该项必填'
  }]
})

const passForm = ref({
  recordIdList: [],
  pass: true,
  failReason: ''
})

let _eventChannel = null

onLoad((options) => {
  const pages = getCurrentPages();
  const page = pages[pages.length - 1];

  _eventChannel = page.getOpenerEventChannel()
  if (options.id) {
    record.value.id = options.id
    getRecords({ id: options.id }).then(({ rows }) => {
      if (rows[0]) {
        record.value = rows[0]
      } else {
        uni.showToast({
          title: '指定的记录不存在',
          icon: 'none'
        })
      }
    }).catch(() => { }).finally(() => {

    })
  }
})


const goUnPassed = () => {
  modalIns.value.open()
}

const goAudited = () => {

  passForm.value.pass = true
  passForm.value.recordIdList = [record.value.id]
  passForm.value.failReason = ''
  onFormSubmit()
}

const onConfirm = () => {
  formIns.value.validate().then(() => {
    passForm.value.pass = false
    passForm.value.recordIdList = [record.value.id]
    onFormSubmit()
  }).catch(() => {
    modalIns.value.closeLoading()
  }).finally(() => {

  })

}


const onFormSubmit = () => {
  uni.showLoading({
    title: '提交中...',
    mask: true
  })
  onAppointformSubmit(passForm.value).then(() => {
    uni.showToast({ icon: 'none', title: `提交成功` })
    _eventChannel.emit('updated')
  }).catch(() => { }).finally(() => {
    uni.hideLoading()
    modalIns.value.close()
  })
}

</script>

<style scoped lang="scss">
@import "@/styles/aj_custom/index.scss";

.data_detail {
  background-color: white;
  margin: 5px 10px;
  border-radius: 10px;

  .data_detail_content {
    padding: 5px 10px;

    .data_detail {
      display: flex;
      justify-content: space-between;
      border-radius: 0px;
      border-bottom: 1px solid rgb(210 206 206 / 50%);
      padding: 10px 5px;
    }
  }
}

.bottom_btns {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;

  .btns_content {
    display: flex;
    justify-content: space-between;
    margin: 10px 20px;

    .btn {
      border-radius: 25px;
      text-align: center;
      padding: 5px 25px;
    }

    .btns_left {
      border: 1px solid blue;
    }

    .btns_right {
      color: white;
      background-color: blue;
    }
  }
}

.popup_content_masker {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background-color: rgba(204, 204, 204, 0.39);
  padding: 20px;

  .popup_content {
    .popup_content_detail {
      background-color: white;
      margin: 10px;
      padding: 10px;
      border-radius: 5px;
    }

    .popup_search {
      color: white;
      text-align: center;
      background-color: blue;
      padding: 12px 66px;
      border-radius: 10px;
    }
  }
}


.order_notice_content {
  .pop_title {
    text-align: center;
    color: black;
    margin-top: 10px;
  }

  .pop_input {
    margin: 30px 20px 25px 20px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

  .pop_btns {
    .btns_content {
      display: flex;
      justify-content: space-between;
      margin: 10px 20px;
      font-size: 12px;

      .btn {
        border-radius: 5px;
        text-align: center;
        padding: 5px 25px;
      }

      .btns_left {
        background-color: rgba(238, 238, 238, 1);
        margin-right: 10px;
      }

      .btns_right {
        color: white;
        background-color: blue;
      }
    }
  }
}
</style>
